<template>
    <div class="head">
        <div class="head-left">
            <img src="@/assets/logo.png" alt="" />
            <span>后台管理系统</span>
        </div>
        <div class="head-right">
            <img
                src="https://img0.baidu.com/it/u=1942253063,3807598283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt=""
            />
            <span class="user">9527</span>
            <span class="exit" @click="changeExit">退出</span>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        changeExit() {
            console.log(11);
            this.$router.push('/login');
        }
    }
};
</script>

<style scoped lang="scss">
.head {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #3a3939;
    padding: 0 15px;
    .head-left {
        display: flex;
        align-items: center;
        > img {
            height: 50px;
            margin-right: 10px;
        }
        > span {
            color: white;
        }
    }

    .head-right {
        width: 150px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
            width: 40px;
            border-radius: 50%;
        }
        .user {
            display: inline-block;
            margin: 0 10px;
        }
        .exit {
            cursor: pointer;
        }
    }
}
</style>
